Preact — Checkboxes, Radio Buttons, and Refs

Preact is a front end web framework that’s similar to React.

It’s smaller and less complex than React.

In this article, we’ll look at how to get started with front end development with Preact.

Checkboxes and Radio Buttons

We can add checkboxes or radio buttons and get their selected values.

For example, we can write:

import { Component, render } from "preact";

export default class App extends Component {
  toggle = (e) => {
    let checked = !this.state.checked;
    this.setState({ checked });
  };

  render(_, { checked }) {
    return (
      <label>
        <input type="checkbox" checked={checked} onClick={this.toggle} />
      </label>
    );
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

We create the checked state.

Then we pass that into the checked prop.

The onClick prop is set to the toggle method.

And we call setState to set the checked state.

We can add radio buttons by writing:

import { Component, render } from "preact";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      fruit: "apple"
    };
  }

onChangeValue = (event) => {
    this.setState({ fruit: event.target.value });
  };

render(_, { fruit }) {
    return (
      <div onChange={this.onChangeValue}>
        <input
          checked={fruit === "apple"}
          type="radio"
          value="apple"
          name="fruit"
        />{" "}
        apple
        <input
          checked={fruit === "orange"}
          type="radio"
          value="orange"
          name="fruit"
        />{" "}
        orange
        <input
          checked={fruit === "grape"}
          type="radio"
          value="grape"
          name="fruit"
        />{" "}
        grape
      </div>
    );
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

We add the radio buttons.

Then we watch for changes in radio button selection with the onChange callback.

In the onChangeValue method, we call setState to set the fruit state.

In the input s, we set the checked prop to set the checked state of the radio button.

We get the fruit state from the render method and check against that to set the checked state.

createRef

We call the createRef function to return a plain object with the current property.

Whenever the render method is called, Preact will assign the DOM node or component to current .

For example, we can write:

import { Component, createRef, render } from "preact";

export default class App extends Component {
  ref = createRef();

  componentDidMount() {
    console.log(this.ref.current);
  }

  render() {
    return <div ref={this.ref}>foo</div>;
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

to assign our ref to the div.

So when we log this.ref.current , we’ll see the div logged.

Callback Refs

We can also get a reference to an element by passing in a callback function.

For example, we can write:

import { Component, render } from "preact";

export default class App extends Component {
  ref = null;
  setRef = (dom) => (this.ref = dom);

  componentDidMount() {
    console.log(this.ref);
  }

  render() {
    return <div ref={this.setRef}>foo</div>;
  }
}
if (typeof window !== "undefined") {
  render(<App />, document.getElementById("root"));
}

We have the setRef function with the dom parameter, which has the DOM node that we passed this function as the value of ref to.

Since we passed it in as the value of the ref prop in the div, the div is dom ‘s value.

We assigned it to this.ref so that we can access it.

And in the componentDidMount hook, we log the value of this.ref and we see that its value is the div.

Conclusion

We can add checkboxes and radio buttons easily with Preact.

And we can get DOM elements with refs.